<template>
    <div>
         <ButtonGroup>
           <Button type="primary" @changetype(0)>新闻分类</Button>
           <Button type="primary" @changetype(1)>产品分类</Button>
           <Button type="primary" @changetype(2)>地区分类</Button>
         </ButtonGroup>
         <Tree :data="data" :render="renderContent"></Tree>
         <Form ref="formValidate" :model="formValidate" :rules="ruleValidate" :label-width="80">
            <FormItem label="分类标题" prop="title">
                <Input v-model="formValidate.title" placeholder="Enter your catage title"></Input>
            </FormItem> 
            <FormItem label="分类ID" prop="title">
                <Input v-model="formValidate.parentId" placeholder="Enter your parent id"></Input>
            </FormItem> 
             <FormItem label="分类类型ID" prop="title">
                <Input v-model="formValidate.typeId" placeholder="Enter your type id"></Input>
            </FormItem> 
            <FormItem>
                <Button type="primary" @click="handleSubmit('formValidate')">{{sendName}}</Button>
                <Button type="ghost" @click="handleReset('formValidate')" style="margin-left: 8px">Reset</Button>
            </FormItem> 
         </Form>
         <Table border :columns="columns" :data="datafile"></Table>
         <Page :total="total" :current="page" :page-size="limit" size="small" show-elevator show-sizer @on-change="pageChange($event)" @on-page-size-change="pageSizeChange($event)" ></Page>
         <Modal
        title="Title"
        v-model="modal"
        @on-ok="getFileList()"
        @on-cancel="getFileList()"
        :mask-closable="false">
         <Upload
        multiple
        type="drag"
        name="avatar"
        action="http://10.31.160.22:3000/upload/profile"
         :data="filedata"
         >
        <div style="padding: 20px 0">
            <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
            <p>Click or drag files here to upload</p>
        </div>
    </Upload>
    </Modal>
    </div>
</template>
<script>
import axios from "axios";
    export default {
        data () {
            return {
                menuid:'',
                total:10,
                page:1,
                limit:10
                ,columns: [
                    {
                        type: 'selection',
                        width: 60,
                        align: 'center'
                    },
                    {
                        title: '文件名称',
                        key: 'originalname',
                        render: (h, params) => {
                            return h('div', [
                                h('Icon', {
                                    props: {
                                        type: 'folder'
                                    }
                                }),
                                h('strong', params.row.originalname)
                            ]);
                        }
                    },
                    {
                        title: '文件类型',
                        key: 'mimetype'
                    },
                    {
                        title: '文件地址',
                        key: 'path'
                    },
                    {
                        title: '文件大小',
                        key: 'size'
                    },
                    {
                        title: '上传时间',
                        key: 'date'
                    },
                    {
                        title: 'Action',
                        key: 'action',
                        width: 200,
                        align: 'center',
                        render: (h, params) => {
                            return h('div', [
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            
                                        }
                                    }
                                }, 'View'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            // console.log(params.row._id);
                                            this.deleteFile(params.row._id);
                                        }
                                    }
                                }, '删除')
                            ]);
                        }
                    }
                ],
                datafile: [],
                filedata:{
                        id:''
                },
                type:"",
                loading: true,
                modal:false,
                sendName:"新建",
                data:[],
                buttonProps: {
                    type: 'ghost',
                    size: 'small',
                },
                formValidate: {
                    title: '',
                    parentId:'',
                    typeId:''
                },
                ruleValidate: {
                    title: [
                        { required: true, message: 'The title cannot be empty', trigger: 'blur' }
                    ]
                },
            }
        },
        created(){
                this.getList();
        },
        methods: {
            pageChange(data){
                this.page=data;
                this.getFileList()
            },
            pageSizeChange(data){
                this.limit=data;
                this.getFileList()
            },
            deleteFile(id){
                if(this.datafile.length==1&&this.page!=1){
                    this.page-=1
                }
                 axios.delete(`http://10.31.160.22:3000/upload/data/${id}`)
                 .then(res=>{
                     this.$Modal.success({
                    title: 'delete success',
                    content: `delete success`
                })
                this.getFileList();
            })
            },
            getFileList(){
                axios.post(`http://10.31.160.22:3000/upload/list`,{
                    menuid:this.menuid,page:this.page,limit:this.limit
                }).then(results=>{
                    console.log(results);
                    this.datafile=results.data.docs;
                    this.total=results.data.total;
                })
            },
            getList(type){
                var type=type||0;
                axios.post(`http://10.31.160.22:3000/cate/list`).then(results=>{
                    this.data=results.data;
                    this.handleReset('formValidate');
                    this.type="create";
                    this.sendName="新建";
                })
            },
            renderContent (h, { root, node, data }) {
                return h('span', {
                    style: {
                        display: 'inline-block',
                        width: '100%'
                    }
                }, [
                    h('span',[
                        h('Icon', {
                            props: {
                                type: 'ios-paper-outline'
                            },
                            style: {
                                marginRight: '8px'
                            }
                        }),
                        h('span',{
                             style: {
                        cursor:'pointer',
                             },
                             on: {
                                        click: () => {
                                            this.menuid=data.id;
                                            this.page=1;
                                            this.getFileList();
                                        }
                                    }
                        }, data.title)
                    ]),
                    h('span', {
                        style: {
                            display: 'inline-block',
                            float: 'right',
                            marginRight: '32px'
                        }
                    }, [
                         h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.formValidate.parentId=data.id;
                                            this.type="create";
                                            this.sendName="新建";
                                        }
                                    }
                                }, '增加分类'),
                                h('Button', {
                                    props: {
                                        type: 'warning',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.sendName="修改";
                                             this.formValidate.parentId=data.id;
                                             this.formValidate.title=data.title;
                                            this.type="change";
                                            
                                        }
                                    }
                                }, '修改分类'),
                                h('Button', {
                                    props: {
                                        type: 'error',
                                        size: 'small'
                                    },
                                    style: {
                                        marginRight: '5px'
                                    },
                                    on: {
                                        click: () => {
                                            this.remove(data.id)
                                        }
                                    }
                                }, '删除分类'),
                                h('Button', {
                                    props: {
                                        type: 'primary',
                                        size: 'small'
                                    },
                                    on: {
                                        click: () => {
                                            this.modal=true;
                                            this.filedata.id=data.id;
                                        }
                                    }
                                }, '上传文件'),
                    ])
                ]);
            },
            remove (id) {
                 axios.delete(`http://10.31.160.22:3000/cate/data/${id}`).then(res=>{
                            this.getList();
                    this.$Message.success('Success!');})
            },
            handleSubmit (name) {
                this.$refs[name].validate((valid) => {
                    if (valid) {
                        if(this.type=="change"){
                            axios.put(`http://10.31.160.22:3000/cate/data/${this.formValidate.parentId}`,this.formValidate).then(res=>{
                            console.log(res);
                            this.$Message.success("修改成功");
                            this.type="create";
                            this.getList();
                        }
                        )
                        }else{
                            if(!this.formValidate.parentId){
                                this.formValidate.parentId=null;
                            }
                            axios.post("http://10.31.160.22:3000/cate/data",this.formValidate).then(res=>{
                            this.getList();
                            this.$Message.success('Success!');})
                        }
                        // });
                    } else {
                        this.$Message.error('Fail!');
                    }
                })
            },
            handleReset (name) {
                this.$refs[name].resetFields();
            },
            changetype(type){
                this.typeId=type;
            }

        }
    }
</script>